<p>
  The <code>ng-table-virtual-scroll</code> package provides an opportunity to use <a href="https://material.angular.io"
                                                                                     target="_blank">Angular
  Material </a>
  <a href="https://material.angular.io/cdk/scrolling" target="_blank"><code>cdk-virtual-scroll-viewport</code></a> with
  <a href="https://material.angular.io/components/table" target="_blank"><code>mat-table</code></a>
</p>

<h3>Installation</h3>

<p>
  To install package by <code>npm</code>:
  <br>
  <code>$ npm install -save ng-table-virtual-scroll</code>
</p>

<h4>Version compatibility</h4>

<table mat-table
       [dataSource]="versionCompatibility"
       class="mat-elevation-z2">
  <tr mat-header-row *matHeaderRowDef="versionCompatibilityColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: versionCompatibilityColumns;"></tr>

  <ng-container matColumnDef="ng">
    <th mat-header-cell
        *matHeaderCellDef
        class="col-sm">Angular Version</th>
    <td mat-cell
        *matCellDef="let element"
        class="col-sm">{{element[0]}}</td>
  </ng-container>

  <ng-container matColumnDef="lib">
    <th mat-header-cell
        *matHeaderCellDef
        class="col-sm">Library Version</th>
    <td mat-cell
        *matCellDef="let element"
        class="col-sm">{{element[1]}}</td>
  </ng-container>

</table>


<p>
  To make it work in your project:
  <br>
  1) Import module:
</p>
<pre [highlight]="snippets.importModule"></pre>
<p>
  <small>
    <b>Note</b>: you need to install and configure
    <a href="https://material.angular.io/cdk/scrolling" target="_blank"><code>cdk-virtual-scroll-viewport</code></a>
    <b> (ScrollingModule)</b> and
    <a href="https://material.angular.io/components/table" target="_blank"><code>mat-table</code></a> <b>
    (MatTableModule)</b> before.
    <code>TableVirtualScroll</code> only make them work together properly
  </small>
</p>
<p>
  2) Use <code>tvsItemSize</code> directive on <code>&lt;cdk-virtual-scroll-viewport&gt;</code>
</p>
<p>
  3) Use <code>new TableVirtualScrollDataSource()</code> as <code>[dataSource]</code> of a <code>&lt;table
  mat-table&gt;</code>, or
  <code>new CdkTableVirtualScrollDataSource()</code> as <code>[dataSource]</code> of a <code>&lt;table
  cdk-table&gt;</code>
</p>

<h3>tvsItemSize directive</h3>

<p>
  When all rows of the table are the same fixed size, you can wrap your <code>table[mat-table]</code> with <code>cdk-virtual-scroll-viewport</code>
  container and add the <code>tvsItemSize</code> directive on it.
</p>

<p>
  To add come configuration, you can add additional properties:
  <br>
  <code>tvsItemSize</code> - the row height in px (default: 48)
  <br>
  <code>headerHeight</code> - the header row height in px (default: 56)
  <br>
  <code>footerHeight</code> - the footer row height in px (default: 48)
  <br>
  <small>
    <b>Note</b>: <code>tvsItemSize</code>/<code>headerHeight</code>/<code>footerHeight</code> properties only required
    for calculations - you need to style your table separately by css
  </small>
</p>
<p>
  <code>headerEnabled</code> - is the header row in the table (default: true)
  <br>
  <code>footerEnabled</code> - is the footer row in the table (default: false)
  <br>
  <code>bufferMultiplier</code> - the size of rendered buffer (default: 0.7). The '<code>bufferMultiplier *
  visibleRowsCount</code>'
  number of rows will be rendered before and after visible part of the table
</p>

<p>
  Don't forget to set height on the <code>cdk-virtual-scroll-viewport</code>
</p>

<h3>VirtualTableDataSource</h3>

<p>
  The <code>tvsItemSize</code> requires the <code>VirtualTableDataSource</code> to be provide as <code>mat-table[dataSource]</code>
  (<code>CdkTableVirtualScrollDataSource</code> for <code>cdk-table[dataSource]</code>) .
  It is the same as the <code>MatTableDataSource</code>, but with few adjustments which was made so the virtual scroll
  could work.
</p>
